/*
 * @Author: wurangkun
 * @Date: 2024-07-13 11:30:16
 * @LastEditTime: 2024-07-24 09:49:33
 * @LastEditors: wurangkun
 * @FilePath: \my-app\components\ScreenBar.tsx
 * @Description: 
 */
import { View, Text, Pressable, TouchableOpacity } from 'react-native'
import React, { useEffect, useState } from 'react'
import StatusBar from './StatusBar'
import { Stack, useNavigation, useRootNavigationState } from 'expo-router'
import MyStyleSheet from '@/hooks/useMySheetStyle'
import { toHome, toIndex } from '@/hooks/routerHooks'

type Props = {
  title?: string
  backgroundColor?: string
  routerLevel?: number
  showBack?: boolean
  borderBottom?: boolean
  headerRight?: React.JSX.Element
  headerLeft?: React.JSX.Element
}


export function ScreenBar({ ...props }: Props) {
  const { title = "标题", backgroundColor = '#ffffff00', borderBottom = true, showBack = true, routerLevel = 1 } = props
  const nav = useNavigation()
  const borderSyle = borderBottom ? style.borderBottom : {}

  const leftNode = showBack && nav.canGoBack() ? <TouchableOpacity onPress={() => nav.goBack()}><Text>back</Text></TouchableOpacity> : null

  const headerLeft = props.headerLeft ? props.headerLeft : leftNode

  return (
    <View style={{ backgroundColor, ...borderSyle }}>
      <StatusBar backgroundColor={backgroundColor} />
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 10, }}>
        <View style={{
          flexDirection: 'row', alignItems: 'center', width: 100,
        }}>
          {headerLeft}
          {routerLevel > 2 ?
            <TouchableOpacity style={{ marginLeft: 10 }} onPress={() => toIndex()}><Text>home</Text></TouchableOpacity>
            : null}
        </View>
        <View><Text style={{ color: '#333', fontWeight: 'bold' }}>{title}</Text></View>
        <View style={{ width: 100 }}>
          {props.headerRight}
        </View>
      </View>
    </View>
  )
}

const style = MyStyleSheet.create({
  borderBottom: {
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  }
})